
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		  <style>
		   #product_card{
		   background-color:#f4f4f4;
		   padding: 15px;
		   border: 1px solid #dfdfdf;
		   border-radius:5px;
		   width: 260px;
		   height:650px;
		   box-shadow: 0px 0px 10px 10px#d0dad0;
		   text-align:center;
		img{
		border-radius:5px;}
		#dd{
		margin: 50px;color:#000000;
		}
		#pp{
			margin: 10px;
			font-size: 20px;
			color: #de0000;
			
		}
		#oo{
			margin: 25px;
			font-size: 12px;
			color:#b4b4b4;
		}

		  </style>
	</head>
	<body>
		<div id="product_card">
		<img src="img/fff0b88b1555f7693a9f0fd23b682aa.jpg" width="260px" height="450px" alt="su7">
		<h3 id="dd">小米su7</h3>
		<p id="pp">￥279999.00</p>
		<p id="oo">已有<span>10万+</span>人评价</p>
		</div>
	</body>
</html>